<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>倒计时工具</title>
    <style>
        .Show {
            color:red;
            font-size:8em;
            font-family:""
        }
        .Button {
            background-color: Honeydew;
            width: 10%;
            font-size:2em;
        }
        .Setting {
            background-color: AliceBlue;
            width: 60%;
            font-size:1em;
            margin: 2em auto 0em auto;
            border: solid 1px #ff0000
        }
        .InputTitle{
            width:8em;

        }
        .Input {
            width: 90%;
            font-size:1em;
        }
        .InputColor{
            width:50%;
        }
        .InputTime {
            width:40%;
        }
        #ShowSetting {
            display: none;
        }
        body {
            text-align: center
        }
    </style>
</head>
<body>
<!-- 标题 -->
<p align="center" id="title" class="Show">活动标题，可在下方设置</p>
<!-- 计时显示 -->
<p align="center" id="TimeCount" class="Show" style='color: MediumSeaGreen'>秒</p>
<p>
    <button type="button" class = "Button" onclick = "start()">重新启动</button>
    <button type="button" class = "Button" onclick = "pause()">暂停/继续</button>
</p>
<!-- <button type="button" class = "Button" onclick = "stop()">停止</button> -->
<!-- 设置区 -->
<table id="Setting" class="Setting">
    <tbody>
        <tr>
            <td class="InputTitle">标题文本</td>
            <td colspan="4"><input type="text" class="Input" oninput="changeTitle(event)" placeholder="请输入需要显示的标题"></td>
        </tr>
        <tr>
            <td class="InputTitle">标题美化</td>
            <td>
                <input class = "InputColor" id="InputTitleColor" type="color" oninput = "changeTitleColor(event)" value = "#ff0000"/>
            </td>
            <td>
                <select style="width:10em" onchange="changeTitleFont(event)" class="Input">
                    <option value="SimSun">宋体</option>
                    <option value="SimHei">黑体</option>
                    <option value="Microsoft Yahei">微软雅黑</option>
                    <option value="Microsoft JhengHei">微软正黑体</option>
                    <option value="KaiTi">楷体</option>
                    <option value="NSimSun">新宋体</option>
                    <option value="FangSong">仿宋</option>
                </select>
            </td>
            <td>
                <label  onclick="changeTitleBorder()" for="TitleBolder" style="font-weight:bold"><input id="TitleBolder" name="TitleBolder" type="checkbox" />加粗</label>
            </td>
            <td>
                <label  onclick="changeTitleItalic()" for="TitleItalic" style="font-style:italic"><input id="TitleItalic" name="TitleItalic" type="checkbox" />斜体</label>
            </td>
        </tr>
        <tr>
            <td class="InputTitle">倒计时长</td>
            <td><input id="InputTime" class="InputTime" onchange="changeTime(event)" type="number" placeholder="180" min=1 value="180" title="输入倒计时间长度，单位为秒"></td>
            <td class="InputTitle">冲刺读秒时长</td>
            <td><input id="InputEndCountTime" class="InputTime" onchange="changeEndCountTime(event)" type="number" placeholder="10" min=1 value="10" title="输入冲刺时段长度，单位为秒"></td>
        </tr>
        <tr>
            <td><label>倒计时字体颜色</label></td>
            <td><input id="InputCountColor" class = "InputColor" type="color" oninput = "changeCountColor(event)" value = "#00ff00"/></td>
            <td><label>冲刺读秒颜色</label></td>
            <td><input id="InputEndCountColor" class = "InputColor" type="color" oninput = "changeEndCountColor(event)" value = "#ff0000"/></td>
        </tr>
    </tbody>
</table>
<p align = "center"> <button id="ShowSetting" class="Button" onclick="showSetting()">显示设置</button></p>
</body>

<script>
var _clock  // 时钟对象
var Clock_State = 0 // 倒计时状态
var Count_Time = document.getElementById("InputTime").value  // 倒计时数据
var Count_EndTime = 0 // 冲刺读秒时段的长度
var Dom_Setting = document.getElementById("Setting")    // 设置区
var Dom_Title = document.getElementById("title")    // 标题对象
var Dom_TimeCount = document.getElementById("TimeCount")    // 倒计时文本对象
var Dom_Button_ShowSetting = document.getElementById("ShowSetting") // 显示设置区按钮
var Color_CountColor = "MediumSeaGreen" // 倒计时读秒初始颜色
var Color_End_Count = "#ff0000"  // 倒计时冲刺读秒颜色初始值

// 初始化
flushTime()   // 计时初始化
Count_EndTime = document.getElementById("InputEndCountTime").value   // 冲刺读秒初始化

//---------------- 显示控制 --------------------
// 修改标题文字
function changeTitle(event){Dom_Title.innerText = event.target.value}
// 修改标题颜色
function changeTitleColor(event){Dom_Title.style["color"] = event.target.value}
// 修改标题字体
function changeTitleFont(event){Dom_Title.style["font-family"]=event.target.value}
// 修改标题加粗
function changeTitleBorder(){
    Dom_TitleBolder = document.getElementById("TitleBolder")
    if(Dom_TitleBolder.checked){
        Dom_Title.style["font-weight"]="";
        Dom_TitleBolder.checked = false
    }
    else{
        Dom_Title.style["font-weight"]="bold";
        Dom_TitleBolder.checked = true
    }
}
// 修改标题斜体
function changeTitleItalic(event){
    Dom_Title = document.getElementById("title")
    Dom_TitleItalic = document.getElementById("TitleItalic")
    if(Dom_TitleItalic.checked){
        Dom_Title.style["font-style"]="";
        Dom_TitleItalic.checked = false
    }
    else{
        Dom_Title.style["font-style"]="italic";
        Dom_TitleItalic.checked = true
    }
}
// 修改倒计时颜色设置
function changeCountColor(event){
    Color_CountColor = event.target.value 
    Dom_TimeCount.style["color"] = Color_CountColor
    }
// 修改最后读秒颜色设置
function changeEndCountColor(event){Color_End_Count = event.target.value }
//
function flushTime(){
    Dom_TimeCount.innerText = Count_Time.toString()+" 秒";   // 更新读秒时间显示
}

//---------------- 计时控制 --------------------
// 修改倒计时初始时长
function changeTime(event){Count_Time = event.target.value}
function changeEndCountTime(event){Count_EndTime = event.target.value}
// 开始计时
function start(){
    hidSetting()
    clearInterval(_clock)   // 清除原有倒计时状态
    Dom_TimeCount.style["color"] = Color_CountColor // 恢复初始倒计时颜色
    Clock_State = 1  // 倒计时状态改为 1
    Count_Time = document.getElementById("InputTime").value  // 获取倒计时初始时长
    flushTime()
    _clock = setInterval("clock()",1000)   // 开始倒计时
}
// 停止倒计时
//function stop(){clearInterval(_clock);}

// 暂停或继续倒计时
function pause(){
    hidSetting()
    flushTime()   // 更新读秒时间显示
    // 如果状态是正在倒计时, 暂停
    if(Clock_State == 1){
        clearInterval(_clock)
        Clock_State = 0
    }
    // 如果状态是暂停，恢复计时
    else{
        Clock_State = 1
        _clock = setInterval("clock()",1000)   // 开始倒计时
    }
}

// 倒计时函数
function clock(startTime){
    Count_Time -= 1;
    flushTime()
    // 10秒变色提醒
    if (Count_Time<=Count_EndTime){
        Dom_TimeCount.style["color"] = Color_End_Count
    }
    else {
        Dom_TimeCount.style["color"] = Color_CountColor
    }
    if(Count_Time <= 0){
        clearInterval(_clock)
        Dom_TimeCount.innerText ="时间到!!"
        return
    }
}

// 显示设置区
function showSetting(){
    Dom_Setting.style["display"] = "table" // 显示设置区
    console.log(Dom_Setting.style["display"])
    Dom_Button_ShowSetting.style["display"] = "none"    // 隐藏按钮
}
// 隐藏设置区
function hidSetting(){
    Dom_Setting.style["display"] = "none" // 隐藏设置区
    Dom_Button_ShowSetting.style["display"] = "inline"    // 显示按钮
}
</script>
<!-- 编写日期 2022年1月21日 版本1.0 -->
<!-- 作者: cheng_xiuyuan-->
<!-- 邮箱: cheng_xiuyuan@fj.sgcc.com.cn -->
</html>